<script setup lang="ts">
// import draggable from 'vuedraggable'
import comp from '../components/index'
import { MeunItem } from './interfaceType'
import { reactive } from 'vue';
import { PictureFilled } from '@element-plus/icons-vue'

import contextMenu from './RightMenu/index'

defineProps({
  msg: String,
  list: Object,
  dragList: { type: Array as () => MeunItem[], required: true }
})


const widgetList = reactive<MeunItem[]>([
  { name: "多行7", id: 7, style: {}, list: [] },
  { name: "多行5", id: 5, style: {}, list: [] },
  { name: "多行6", id: 6, style: {}, list: [] },
  { name: "多行8", id: 8, style: {}, list: [] },
  { name: "多行9", id: 9, style: {}, list: [] },
  { name: "多行10", id: 10, style: {}, list: [] },
])

// ************************************

let style = reactive({
  height: 'auto',
  width: '200px',
  left: '0px',
  top: '0px'
})

let rightMenuParams = reactive({
  isShow: false,
  isShow2: false,
})
//鼠标滚轮事件
// function handleMouseWheel(e) {
//   e.preventDefault()
//   // let _this = this
//   if (!window.scrollY) {
//     window.removeEventListener('wheel', handleMouseWheel, {
//       passive: false,
//     })
//     // 禁止页面滚动
//     e.preventDefault()
//     if (e.deltaX > 100 || (e.deltaY < -100 && e.deltaY != 0)) {
//       // _this.$refs['carouselRef'].prev()
//     }

//     if ((e.deltaX < -100 && e.deltaX != 0) || e.deltaY > 100) {
//       // _this.$refs['carouselRef'].next()
//     }
//     // $forceUpdate()
//     setTimeout(() => {
//       // _this.carouseParams.activeNames = _this.$refs['carouselRef'].modelValue
//       window.addEventListener('wheel', handleMouseWheel, {
//         passive: false,
//       })
//     }, 500)
//   }
// },


//鼠标点击事件
function handleMousedown(e) {
  // console.log(e)

  // if (this.searchTypeCollapse) {
  //   this.searchTypeCollapse = false
  //   return;
  // }
  // rightMenuParams.isShow = false
  if (e.target.id != 'draggable' && e.target.localName != 'body') return;
  // if (e.target.id == 'draggable') return;
  //关闭鼠标右键默认事件
  if (['input'].includes(e.target.localName)) {
    document.oncontextmenu = () => { return true }
    return
  } else {
    document.oncontextmenu = () => { return false }
  }
  // if (e.target.id == 'app-item' && this.isEdit) {
  //   this.isEdit = false
  //   return
  // }
  console.log(e.target.id)
  if (e.button == 2) {
      contextMenu(e, options)

    console.log("你点了右键")
  } else if (e.button == 0) {
    // this.isEdit = false
    console.log("你点了左键")
    // contextMenu(e, null)?.destroy()
  } else if (e.button == 1) {
    console.log("你点了滚轮")
    // contextMenu(e, null)?.destroy()
  }

}
onMounted(() => {

  // console.log(widgetList)
  // window.addEventListener('dragenter', function (e) {
  //       // lastenter = e.target;
  //       console.log(e.target)
  //     });

  // window.addEventListener('wheel', handleMouseWheel, {
  //   passive: false,
  // });

  window.addEventListener('mouseup', handleMousedown, {
    passive: false
  })
  window.addEventListener('mouseup', function(e){
    console.log(e)
  })
})


onBeforeUnmount(() => {
  window.removeEventListener('mouseup', handleMousedown)
})

import { MenuItem, ContextMenuOptions } from './RightMenu/interfaceType'
interface Data {
  name: string
  count: number
}

const items: MenuItem[] = [
  {
    label: `复制`,
    svg:PictureFilled,
    onClick: () => {
      console.log(`已复制`)
    }
  },
  {
    label: `test`,
    visible: false,
    onClick: () => {
      console.log(`test`)
    }
  }
]
const options: ContextMenuOptions = {
  items
}

</script>

<template>
  <div>
    <!-- //需要克隆的数据，A组 -->
    <!-- <draggable :list="dragList" :force-fallback="true" :group="{ name: 'people', pull: true, put: true }" :sort="true"
      itemKey="id" class="items" animation="300" id="draggable">
      <template #item="{ element }">
        <div class="item move" :style="element.style">
          <component :id="element?.type || ''" :is="comp[element?.type || 'box']" :config="element" class="item2"></component>
        </div>
      </template>
    </draggable> -->
    <div>==============================</div>
    <img style="width: 100px;height: 100px;"src="https://img.omnitab.link/icons/174.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim" alt="">
    <div>==============================</div>
    <!-- //拖拽的结果，B组 -->
    <!-- <draggable :list="widgetList" :force-fallback="true" :group="{ name: 'people', pull: true, put: true }" :sort="true"
      itemKey="id" class="items">
      <template #item="{ element }">
        <div class="item move">
          {{ element?.type }}
          <component :is="comp[element?.type || 'box']" :config="element" class="aaas"></component>
        </div>
      </template>
    </draggable> -->
  </div>
</template>

<style scoped>
/* ************************************************************************ */


/* ************************************************************************ */
.items {
  color: white;
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(auto-fill, 70px);
  gap: 23px;
  grid-auto-flow: dense;
  grid-auto-rows: 80px;
  /* max-width: 100%; */
  max-width: 800px;
  /* padding: 8px; */
  width: 100%;
  /* min-height: 70px; */
  /* grid-column-start: span 2;
  grid-row-start: span 2; */

  .item {
    /* background-color: aquamarine; */
    height: 100%;
    /* margin: 10px; */
    .item2 {
      /* background-color: rgba(0, 0, 0, 0.3); */
      height: 100%;
      border-radius: 10px;
      overflow: hidden;
      filter: drop-shadow(0px 0px 6px black);
      /* margin: 10px; */
      /* border: 1px solid; */
    }
     #IconBox{
      filter:unset;
      &:hover{
        filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.3));
      }
     }
  }
}


</style>